<template>
  <div class="profile-container">
    <!-- 背景图 -->
    <div class="background"></div>

    <!-- 内容区域 -->
    <div class="profile-content">
      <!-- 头像 -->
      <div class="avatar-wrapper">
        <img :src="profile.headpicture || '@/pic/default_avatar.png'" alt="头像" class="avatar" @click="triggerFileInput" />
        <!-- <input type="file" ref="fileInput" @change="onAvatarChange" accept="image/*" hidden /> -->
      </div>

      <!-- 用户信息 -->
      <div class="info-group">
        <div class="info-item">
          <label>昵称：</label>
          <span>{{ profile.nickedname }}</span>
        </div>
        <div class="info-item">
          <label>账号：</label>
          <span>{{ profile.username }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="button-group">
        <button class="edit-btn" @click="openEditModal">编辑资料</button>
        <RouterLink to="/" class="back-btn">返回</RouterLink>
      </div>
    </div>

    <!-- 编辑资料弹窗 -->
    <div class="modal" v-if="showEditModal">
      <div class="modal-content">
        <!-- 弹窗头像 -->
        <div class="modal-avatar-wrapper">
          <img :src="profile.headpicture || '@/pic/default_avatar.png'" alt="头像" class="avatar" @click="triggerFileInputModal" />
          <input type="file" ref="fileInputModal" @change="onHeadPictureChange" accept="image/*" hidden />
          <p class="upload-tip">点击头像上传图片</p>
        </div>

        <!-- 昵称输入 -->
        <div class="input-group">
          <label>昵称</label>
          <input type="text" v-model="editData.nickedname" placeholder="请输入昵称" />
        </div>

        <!-- 弹窗按钮 -->
        <div class="modal-buttons">
          <button class="confirm-btn" @click="saveProfile">确定</button>
          <button class="cancel-btn" @click="closeEditModal">返回</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";
import config from "@/config"

const router = useRouter();

// 模拟用户数据（实际项目中从 API 获取）
const profile = reactive({
  headpicture: config.api + 'data/get-picture?id=0',
  nickedname: "加载中",
  username: "加载中"
});

onMounted(async () => {
  let response = await axios.post(config.api + "data/get-userinfo", { }, {
    withCredentials: true
  })
  profile.nickedname = response.data.nickedname;
  profile.headpicture = config.api + 'data/get-picture?id=' + response.data.headpicture;
  profile.username = response.data.username;
})



// 编辑数据（弹窗用）
const editData = reactive({
  headpicture: '',
  nickedname: ''
});

const showEditModal = ref(false);
const fileInput = ref(null);
const fileInputModal = ref(null);

// 初始化编辑数据
const initEditData = () => {
  editData.headpicture = profile.headpicture;
  editData.nickedname = profile.nickedname;
};

// 打开弹窗
const openEditModal = () => {
  initEditData();
  showEditModal.value = true;
};

// 关闭弹窗
const closeEditModal = () => {
  showEditModal.value = false;
};

// 触发文件选择（主界面）
const triggerFileInput = () => {
  fileInput.value?.click();
};

// 触发文件选择（弹窗）
const triggerFileInputModal = () => {
  fileInputModal.value?.click();
};

// 处理头像上传
const onHeadPictureChange = async (e) => {
  const file = e.target.files?.[0];
  const formData = new FormData();
  if (file) {
    formData.append('headpicture', file);
    
    let response = await axios.post(config.api + 'data/upload-picture', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      withCredentials:true,
    })

    if (response.data.status != '0') {
      alert(response.data.msg);
    }
    else {
      profile.headpicture = config.api + 'data/get-picture?id=' + response.data.headpicture;
    }
  }
  else {
    alert("请选择图片");
  }
};

// 保存修改
const saveProfile = async () => {
  if (!editData.nickedname.trim()) {
    alert('请输入昵称');
    return;
  }
  // 保存到 profile
  profile.nickedname = editData.nickedname.trim();

  let response = await axios.post(config.api + "data/change-info", {
    "nickedname": editData.nickedname.trim(),
  }, {
    withCredentials: true
  });
   profile.nickedname = response.data.nickedname;
  
  closeEditModal();
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.profile-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px 40px;
  font-family: 'Arial', sans-serif;
}

/* 背景图 */
.profile-container .background {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("@/pic/fengmian4.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* 主内容区域 */
.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 头像框 */
.avatar-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 3px solid #007bff;
  cursor: pointer;
  transition: transform 0.3s;
}

.avatar-wrapper:hover {
  transform: scale(1.05);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 用户信息 */
.info-group {
  width: 100%;
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  font-size: 16px;
  color: #333;
}

.info-item label {
  color: #555;
  width: 60px;
  text-align: left;
}

.info-item span {
  flex: 1;
  color: #333;
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 16px;
  width: 100%;
}

.edit-btn {
  flex: 1;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn:hover {
  background-color: #0056b3;
}

.back-btn {
  flex: 1;
  padding: 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #5a6268;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  width: 90%;
  max-width: 350px;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

/* 弹窗头像 */
.modal-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.modal-avatar-wrapper .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #007bff;
  cursor: pointer;
}

.upload-tip {
  margin-top: 8px;
  font-size: 13px;
  color: #007bff;
}

/* 输入框 */
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  font-size: 15px;
  color: #555;
  margin-bottom: 6px;
  display: block;
}

.input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #007bff;
}

/* 弹窗按钮 */
.modal-buttons {
  display: flex;
  gap: 12px;
}

.confirm-btn {
  flex: 1;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.confirm-btn:hover {
  background-color: #0056b3;
}

.cancel-btn {
  flex: 1;
  padding: 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.cancel-btn:hover {
  background-color: #5a6268;
}

/* 响应式 */
@media (max-width: 480px) {
  .profile-content,
  .modal-content {
    max-width: 100%;
    padding: 20px;
  }

  .button-group,
  .modal-buttons {
    flex-direction: column;
  }

  .edit-btn,
  .back-btn,
  .confirm-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>